<template>
    <sky-base-page>
        <up-swiper :list="goodsInfo.images_arr" height="240"></up-swiper>
        
        <view class="goods-info">
            <view class="price">￥{{goodsInfo.price}}</view>
            <view class="goods-name">
                {{goodsInfo.goods_name}}
            </view>
            <view class="goods-desc">{{goodsInfo.sub_title}}</view>
        </view>
        <view class="rich-box">
            <view class="title">商品详情</view>
            <rich-text :nodes="goodsInfo.description"></rich-text>
        </view>
        <template #footer>
            <up-button type="primary" shape="circle" color="#b07f63" text="立即购买"
                       @tap="openConfirmOrder"></up-button>
        </template>
    </sky-base-page>
    
    <!--    确认订单弹窗-->
    <confirmOrder ref="confirmOrderRef" @success="getGoodsInfo"></confirmOrder>

</template>
<script setup>
import confirmOrder from './components/confirmOrder.vue'

const confirmOrderRef = ref()
const goodsInfo = ref({})

const openConfirmOrder = () => {
    confirmOrderRef.value.open(goodsInfo.value)
}

// 获取轮播图
const getGoodsInfo = async () => {
    const res = await qly.api.user.goods.info({id:qly.page.params.id})
    if (res.code === 1) {
        goodsInfo.value = res.data
    } else {
        qly.dialog.apiError(res).catch()
    }
}

qly.page.onLoad(()=>{
    getGoodsInfo()
})
</script>
<style scoped lang="scss">
.goods-info {
    background-color: #fff;
    padding: 28rpx 32rpx;
    
    .price {
        font-size: 40rpx;
        color: #E84026;
        font-weight: bold;
    }
    
    .goods-name {
        font-weight: bold;
        font-size: 32rpx;
        color: #303133;
        margin-bottom: 8rpx;
    }
    
    .goods-desc {
        font-size: 28rpx;
        color: #909193;
    }
}

.rich-box {
    background-color: #fff;
    padding: 28rpx 32rpx;
    box-sizing: border-box;
    margin-top: 12rpx;
    
    .title {
        font-weight: bold;
        font-size: 32rpx;
        color: #303133;
        margin-bottom: 8rpx;
    }
}
</style>
